<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
	<ui:composition template="/WEB-INF/facelets/templateAdmin.xhtml">
		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>
				<h:form id="form">
					<p:panel id="msgProjectClientesTitle" header="Anexos por Areas"
						style="height:350px;width:1070px">
						<p:messages id="msg" showDetail="false" />
						<p:dataTable id="tabla" value="#{anxsXAreaView.areas}" var="area"
							paginator="true" rows="5" editable="true">

							<p:ajax event="rowEdit" update=":form:msg,:form:tabla"
								listener="#{anxsXAreaView.rowEventListener}" />
								
							<p:column filterBy="#{area.idAreaInvolucrada}"
								sortBy="#{area.idAreaInvolucrada}" headerText="Area"
								style="height:20px;width:250px">
								<h:outputText value="#{area.nombreArea}" />
							</p:column>

							<p:column headerText="Editar" style="height:20px;width:100px">
								<p:commandLink update=":dialogAnxsXArea"
									action="#{anxsXAreaView.action_edit()}"
									title="View Modify">
									<p:rowEditor id="editar" />
									<f:setPropertyActionListener
										value="#{area.idAreaInvolucrada}"
										target="#{anxsXAreaView.idAreaInvolucrada}" />
								</p:commandLink>
							</p:column>
						</p:dataTable>
					</p:panel>
					<p:panel id="panelBoton" style="height:40px;width:1070px">
						<div align="center">
							<p:commandButton id="btnNew" value="Nuevo"
								action="#{anxsXAreaView.action_new()}" 
								update=":dialogAnxsXArea :form:msgProjectClientesTitle" />
						</div>
					</p:panel>
				</h:form>
				<p:dialog id="dialogAnxsXArea" appendToBody="true" draggable="true"
					closable="false" visible="#{anxsXAreaView.showDialog}"
					resizable="false" modal="true" width="800">
					<h:form id="formDialog">
						<p:messages id="msg" showDetail="false" />
						<p:panel id="panelAnxsXArea" header="Nuevo Anexo por Area">
							<h:panelGrid columns="2" id="panelGrid">

								<h:outputText id="msgIdAreaInvolucrada_AreasInvolucradas"
									value="*Area:" />
								<p:selectOneMenu id="AreasPqr"
									value="#{anxsXAreaView.idAreaInvolucrada}"
									style="height:20px;width:150px" disabled="#{anxsXAreaView.boton}">
									<f:selectItem itemLabel="Seleccione" itemValue="" />
									<f:selectItems value="#{anxsXAreaView.areasInvolucradas}" />
								</p:selectOneMenu>
								
								<h:outputText id="msgAnexosPqr" value="*Anexo:" />
								<p:pickList id="AnexosPqrPickList"
									value="#{anxsXAreaView.anexosPqr}" var="anexoPqr"
									itemValue="#{anexoPqr.idAnexoPqr}"
									itemLabel="#{anexoPqr.descripcionAnexo}">
								</p:pickList>
							</h:panelGrid>
						</p:panel>
						<p:panel id="panelBotones">
							<div align="center">
								<p:commandButton id="btnSave" binding="#{anxsXAreaView.btnSave}"
									disabled="#{anxsXAreaView.boton}" value="Guardar"
									action="#{anxsXAreaView.action_save()}"
									update=":dialogAnxsXArea :form:msgProjectClientesTitle" />
								<p:commandButton id="btnModify"
									binding="#{anxsXAreaView.btnModify}" value="Modificar"
									disabled="#{!anxsXAreaView.boton}"
									action="#{anxsXAreaView.action_save()}"
									update=":dialogAnxsXArea :form:msgProjectClientesTitle" />
								<p:commandButton id="btnClear" value="Limpiar"
									disabled="#{anxsXAreaView.boton}"
									action="#{anxsXAreaView.action_clear()}"
									update=":dialogAnxsXArea" />
								<p:commandButton id="btnExit" value="Salir"
									action="#{anxsXAreaView.action_closeDialog()}"
									update=":dialogAnxsXArea" />
							</div>
						</p:panel>
					</h:form>
				</p:dialog>
			</f:view>
		</ui:define>
	</ui:composition>
</h:body>
</html>